<template>
  <!-- 访客记录-详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    cancelContext="拒绝"
    confirmContext="通过"
    modalStyle="detailModal"
    title="宣传记录"
    width="980px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <div class="common-title">
        <div class="icon"></div>
        <div class="content">宣传信息</div>
      </div>

      <table style="margin: 12px 0">
        <tr>
          <td class="td-label">派出所</td>
          <td class="td-value text-overflow">
            {{ details.policeAgencyName }}
          </td>

          <td class="td-label" rowspan="5">现场照片</td>
          <td class="td-value text-overflow" rowspan="5" style="max-width: 220px; padding-left: 0">
            <img
              :id="details.siteImage"
              :data-original="imgPrefix + details.siteImage"
              :src="imgPrefix + details.siteImage"
              style="width: 100%; height: 230px; object-fit: cover; cursor: pointer"
              @click="werImg(details.siteImage)"
            />
          </td>
        </tr>

        <tr>
          <td class="td-label">宣传民警</td>
          <td class="td-value text-overflow">
            {{ details.policeName }}
          </td>
        </tr>

        <tr>
          <td class="td-label">宣传时间</td>
          <td class="td-value text-overflow">
            {{ details.publicizeTime }}
          </td>
        </tr>

        <tr>
          <td class="td-label">宣传地点</td>
          <td class="td-value text-overflow" style="max-width: 400px">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span> {{ details.address }} </span>
              </template>
              {{ details.address }}
            </a-tooltip>
          </td>
        </tr>

        <tr>
          <td class="td-label">宣传内容</td>
          <td class="td-value text-overflow">
            <!-- {{ details.columnMemo }} -->
            <a-checkbox-group v-model="check_option" :options="publicize_column_type" disabled />
          </td>
        </tr>
      </table>

      <div class="common-title">
        <div class="icon"></div>
        <div class="content">群众信息</div>
      </div>

      <table style="margin: 12px 0">
        <tr>
          <td class="td-label">群众姓名</td>
          <td class="td-value text-overflow" style="width: 100%">
            {{ details.userName }}
          </td>
        </tr>

        <tr>
          <td class="td-label">联系方式</td>
          <td class="td-value text-overflow" style="width: 100%">
            {{ details.userMobile }}
          </td>
        </tr>
      </table>
    </div>

    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { getAction } from '@/api/manage'
import { ajaxGetDictItems } from '@/api/api'
import { getPrefixImg } from '../../../utils/util'
export default {
  name: 'detailModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      imgPrefix: '',
      details: {},
      record: {},
      check_option: [],
      publicize_column_type: [],
    }
  },
  methods: {
    show(records) {
      this.publicVisible = true
      this.record = records
      this.get_detail(records.id)
    },

    async get_detail(id) {
      let { result } = await getAction('/common/publicize_record/detail', { id })
      this.details = result

      let { result: static_server } = await ajaxGetDictItems({ code: 'static_server' })
      this.imgPrefix = getPrefixImg()

      let { result: publicize_column_type } = await ajaxGetDictItems({ code: 'publicize_column_type' })
      this.publicize_column_type = publicize_column_type.map((item) => {
        return item.text
      })

      console.log(result, this.publicize_column_type, 'result')

      this.check_option = result.columnMemo.split('、')
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 20px;
  border-radius: 0 0 4px 4px;
}

/deep/ .modalFooter {
  height: 0 !important;
}

/deep/ .ant-checkbox-disabled + span {
  color: #1163b8;
}

/deep/ .ant-checkbox-inner::after {
  border-color: #7db2e8 !important;
}

table {
  border-collapse: collapse;
}
tr {
  height: 46px;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
}
.td-label {
  background: var(--theme-modal-label-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-tab-text-color);
  width: 160px;
  min-width: 160px;
  text-align: center;
}

.td-value {
  background: var(--theme-container-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-modal-label-value-color);
  padding-left: 25px;
  width: 400px;
}

.click-style {
  color: #47e829;
  cursor: pointer;
}

.p-14 {
  padding: 14px 20px;
}

.click-img {
  width: 150px;
  height: 170px;
  object-fit: cover;
  cursor: pointer;
  margin-left: 10px;
}
</style>
